<template>
  <div class="second-page">
    <ComTopNum/>
    <div class="center-box">
      <div class="center-box-left">
        <ComNavTab text="应用启动总量分布"/>
        <ComBaseEcharts 
                 echartId="applySumIdSecond"
                :options="getOptionsForAppAllPieRef"
                :customStyle="{width: '100%', height: '100%'}"/>
      </div>
      <div class="center-box-right">
        <ComNavTab text="上周应用活跃排名"/>
        <ComBaseEcharts
                 echartId="getOptionsForRankBar"
                :options="getOptionsForRankBarRef"
                :customStyle="{width: '100%', height: '90%'}"/>
      </div>
    </div>
    <div class="bottom-box">
        <ComNavTab text="应用活跃情况一览"/>
        <ComBaseEcharts 
                 echartId="getOptionsForActiveBar"
                :options="getOptionsForActiveBarRef"
                :customStyle="{width: '100%', height: '90%'}"/>
    </div>
    <div class="top4-box">
      <div class="top4-box-l item">
        <div class="nav-box">
          <ComNavTab text="月度应用启动情况"/>
          <div class="r">
            <ComSelectDate @modelValue="modelValue" :modelValue="selectDate.slice(0, 4) + '-' + selectDate.slice(4)" type="month"/>
          </div>
        </div>
        <ComBaseEcharts 
                 echartId="getOptionsForTop4Lbar"
                :options="getOptionsForTop4LbarRef"
                :customStyle="{width: '100%', height: '90%'}"/>
      </div>
      <div class="top4-box-r item">
        <div class="nav-box">
          <ComNavTab text="年度应用启动情况"/>
          <div class="r">
            <ComSelectDate @modelValue="modelValueYear"  :modelValue="selectYearDate" type="year"/>
          </div>
        </div>
        <ComBaseEcharts 
                 echartId="getOptionsForTop4Rbar"
                :options="getOptionsForTop4RbarRef"
                :customStyle="{width: '100%', height: '90%'}"/>
      </div>             
    </div>
    <div>
      <ComNavTab text="应用活跃详细统计"/>
      <div class="box-item">
        <div style="padding-top: 16px">
            <com-table
                style="z-index: 3"
                :isIndex="false"
                :colorKey="['last_30_days_percent','last_7_days_percent','last_1_days_percent']"
                :listData="appStartList"
                :hederTextArray="[
                    { title: '应用', width: '12.5%' },
                    { title: '累计活跃量', width: '12.5%' },
                    { title: '近30天活跃', width: '12.5%' },
                    { title: '近30天活跃占比', width: '12.5%' },
                    { title: '近7天活跃', width: '12.5%' },
                    { title: '近7天活跃占比', width: '12.5%' },
                    { title: '昨天启动量', width: '12.5%' },
                    { title: '昨天活跃占比', width: '12.5%' },
                ]"
                :tableTextArray="[
                    'app_name',
                    'app_active_num_format',
                    'last_30_days',
                    'last_30_days_percent',
                    'last_7_days',
                    'last_7_days_percent',
                    'last_1_days',
                    'last_1_days_percent'
                ]"
            ></com-table>
        </div>
    </div>
  </div>
  </div>
</template>
<script setup>
  import { ref, onMounted } from "vue"
  import ComNavTab from '@/components/public/ComNavTab.vue';
  import ComBaseEcharts from '@/components/public/ComBaseEcharts.vue'
  import { getOptionsForAppAllPie, getOptionsForRankBar, getOptionsForActiveBar } from './option.js'
  import ComTable from '@/components/public/ComTab/indexView.vue'
  import ComSelectDate from '@/components/public/ComSelectDate.vue'
  import ComTopNum  from "../components/ComTopNum.vue";
  import { getAppSum, 
           getTotalAppActiveSum, 
           getMounthStartSum, 
           getYearStartSum } from '@/api/sdk/sdk.js'
  const getOptionsForAppAllPieRef = ref(getOptionsForAppAllPie([]))
  //上周应用活跃排名
  const getOptionsForRankBarRef = ref(getOptionsForRankBar([]))

  //月度应用启动情况
  const getOptionsForTop4LbarRef = ref(getOptionsForRankBar([]))
  //年度应用启动情况
  const getOptionsForTop4RbarRef = ref(getOptionsForRankBar([]))
  //应用活跃情况一览
  const getOptionsForActiveBarRef = ref(getOptionsForActiveBar([]))

  //应用启动
  const appStartList = ref([])

//启动总量分布-排名
 const appStartRank = (type) => {
  if(type == 'startNum'){
    getAppSum().then(res => {
      const { data } = res.data
      if(data.length > 0 && data[0].data.length > 0){
        const appSumData = data[0].data.map(item => {
          return {
            name: item.app_name,
            value: Number(item.total_app_startup_num)
          };
        });
        getOptionsForAppAllPieRef.value = getOptionsForAppAllPie(appSumData)
      }
    })    
  }else {
    //上周排名-应用活跃-应用启动详细
    getAppSum({limit:'10', type: 5}).then(res => {
      const { data } = res.data
      if(data.length > 0 && data[0].data.length > 0){
        const appSumData = data[0].data.map(item => {
          return {
            name: item.app_name,
            value: Number(item.last_7_days_app_active_num),
            last_1_days_app_active_num: Number(item.last_1_days_app_active_num),
            last_30_days_app_active_num: Number(item.last_30_days_app_active_num)
          };
        });
        appSumData.sort((a, b) => b.value - a.value);
        const yLabelLast7 = appSumData.map(item => item.name)
        const yDataLast7 = appSumData.map(item => item.value)
        getOptionsForRankBarRef.value = getOptionsForRankBar(yLabelLast7, yDataLast7,'上周应用活跃排名')
        
        //---应用活跃情况一览start---
        const yDataLast7NoRank = data[0].data.map(v => Number(v.last_7_days_app_active_num))
        const yDataLast30 = data[0].data.map(v => Number(v.last_30_days_app_active_num))
        const xData = data[0].data.map(v => v.app_name)
        const yDataActive = data[0].data.map(v => Number(v.uv_total))
        getOptionsForActiveBarRef.value = getOptionsForActiveBar({xData: xData, y1Data: yDataActive, y2Data: yDataLast30, y3Data: yDataLast7NoRank})
        //---应用活跃情况一览end---

        //应用启动详细--表格
        getTotalAppActiveSum().then(res => {
          const appActivedData = res.data.data;
          if(appActivedData.length > 0 ){
              appActivedData.forEach(v => {
                    v.app_active_num_format = Number(v.uv_total).toLocaleString();
                    v.last_1_days = Number(v.last_1_days_app_active_num).toLocaleString(),
                    v.last_1_days_percent = v.percentage_last_1_days_app_active_num + '%';
                    v.last_7_days = Number(v.last_7_days_app_active_num).toLocaleString();
                    v.last_7_days_percent = v.percentage_last_7_days_app_active_num + '%';
                    v.last_30_days = Number(v.last_30_days_app_active_num).toLocaleString();
                    v.last_30_days_percent = v.percentage_last_30_days_app_active_num + '%';
                })
            appStartList.value = appActivedData
          }
        })
      }
    })   
  }
 }
 //月度应用启动情况
 const mounthStartSum = () =>{ 
  getMounthStartSum({begintime: selectDate.value, endtime: selectDate.value}).then(res => {
      const { data } = res.data
      if(data){
        if(data.length > 0){
          const xData = data[0].data.map(v => v.app_name)
          const yData = data[0].data.map(v => Number(v.month_app_startup_num))
          getOptionsForTop4LbarRef.value = getOptionsForRankBar(xData, yData, '月度应用启动情况')
        }
      }else {
        getOptionsForTop4LbarRef.value = getOptionsForRankBar([], [])
      }
    })
 }
 //年度应用启动情况
 const yearStartSum = () =>{
  getYearStartSum({begintime: selectYearDate.value, endtime: selectYearDate.value}).then(res => { 
      const { data } = res.data
      if(data){
        if(data.length > 0){
          const xData = data[0].data.map(v => v.app_name)
          const yData = data[0].data.map(v => Number(v.year_app_startup_num))
          getOptionsForTop4RbarRef.value = getOptionsForRankBar(xData, yData, '年度应用启动情况')
        }
      } else {
        getOptionsForTop4RbarRef.value = getOptionsForRankBar([], [])
      }
    })
 }
  onMounted(() => {
    appStartRank('startNum')
    appStartRank()
    mounthStartSum()
    yearStartSum()
  })
const currentDate = new Date();
const selectDate =  ref(currentDate.getFullYear()+(currentDate.getMonth() + 1).toString().padStart(2, '0'))
const modelValue = (value) => {
      // 将传入的日期字符串转换为 Date 对象
      const inputDate = new Date(value);
  // 定义最小日期为 2020-09
  const minDate = new Date('2022-02');
  // 获取当前日期
  const currentDate = new Date();

  // 判断输入日期是否小于最小日期或大于当前日期
  if (inputDate < minDate || inputDate > currentDate) {
    // 提示错误信息
    alert('请选择2022年02月到今天的月份');
    return;
  }
  selectDate.value = value.replace('-','')
  mounthStartSum()
}
const selectYearDate = ref(String(currentDate.getFullYear()))
const modelValueYear = (value) => {
    // 将传入的日期字符串转换为 Date 对象
    const inputDate = new Date(value);
  // 定义最小日期为 2020-09-01
  const minDate = new Date('2022');
  // 获取当前日期
  const currentDate = new Date();

  // 判断输入日期是否小于最小日期或大于当前日期
  if (inputDate < minDate || inputDate > currentDate) {
    // 提示错误信息
    alert('请选择2022年到今天的年份');
    return;
  }
  selectYearDate.value = value.replace('-','')
  yearStartSum()
}
</script>
<style lang="scss" scoped>
.second-page {
  .nav-box{
    width: 100%;
  }
  padding: 0 40px 60px 40px;
  .center-box{
    display: flex;
    height: 500px;
    padding-top: 25px;
    background-image: url('/src/assets/BG1.png');
    background-size: 100% 110%;
    background-repeat: no-repeat;
    &-left{
      width: 45%;
    }
    &-right{
      width: 55%;
      margin-left:20px;
    }
  }
  .bottom-box{
    height: 500px;
  }
  .top4-box{
    height: 530px;
    display: flex;
    &-l{
      margin-right: 15px;
    }
    &-r{
      margin-left: 15px;
    }
  .item{
    position: relative;
    flex:1;
    .nav-box{
      display: flex;
      justify-content: space-between;
      .r{
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 111
      }
    }
  }
   
  }
}
.inner-text{
  text-align: left;
  padding-left: 50px;
}
.actived-style{
  color: #FFD042 !important;
}
</style>